<template>
	<view v-if="info">
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">
			<view class="banner">
				<swiper class="swipers" circular :indicator-dots="false" :autoplay="false" @change="swiperChange">
					<swiper-item v-if="info.video">
						<!-- <video :src="info.video" style="width: 100%;"></video> -->
						<VideoVue :src="info.video"
							:imgUrl="info.video + '?x-oss-process=video/snapshot,t_0,f_jpg,w_315'" ref="video" />
					</swiper-item>
					<swiper-item v-for="it in info.carousel" :key="it">
						<image :src="it" style="width: 100%;height: 100%;" mode="aspectFill"
							@click="MpreviewImage([it])"></image>
					</swiper-item>
				</swiper>
				<view class="banner-current">
					{{swiperIndex}}/{{info.video ? 1 + info.carousel.length : info.carousel.length}}
				</view>
			</view>
			<view class="good-item">
				<block v-if="type != 3">
					<view class="good-price">
						<view class="present">
							￥<text>{{info.price || 0}}</text>
						</view>
						<view class="present">
							~
						</view>
						<view class="present">
							￥<text>{{info.price2 || 0}}</text>
						</view>
					</view>
					<view class="good-tx">
						包邮范围：{{info.shippingOptions === 1 ? '全国包邮' : info.shippingOptions === 2 ? '无运输' :  info.shippingOptions === 3 ? '全国包邮（偏远地区除外）' : ''}}
					</view>
				</block>
				<block v-else>
					<view class="good-fx">
						<view class="good-fx-item">
							<view class="good-fx-item-tx">分销价格</view>
							<view class="good-fx-item-price">
								<text>￥</text><text
									style="font-weight: bold;font-size:40rpx ;">{{info.PurchasePrice || 0}}</text><text
									style="font-size:22rpx;margin-left: 8rpx;">起</text>
							</view>
						</view>
						<view class="good-fx-item">
							<view class="good-fx-item-tx">预估赚</view>
							<view class="good-fx-item-price"
								v-if="getPrice(info.make_money) === getPrice(info.make_money2)">
								<text>￥</text> <text
									style="font-weight: bold;font-size:40rpx ;">{{getPrice(info.make_money) || 0}}</text>
							</view>
							<view class="good-fx-item-price" v-else>
								<text>￥</text> <text
									style="font-weight: bold;font-size:40rpx ;">{{getPrice(info.make_money) || 0}}</text>
								~<text>￥</text> <text
									style="font-weight: bold;font-size:40rpx ;">{{getPrice(info.make_money2)}}</text>
							</view>
						</view>
					</view>
					<view class="good-tx">零售价 ￥{{info.price || 0}}~￥{{info.price2 || 0}}</view>
				</block>
				<view class="good-title">{{info.name}}</view>

				<view class="item-boom">
					<view class="sold">
						已售
						<text>{{info.Sales? info.Sales > 10000 ? Math.floor(info.Sales/10000) + '万+' : info.Sales : 0}}</text>
					</view>
				</view>
				<view class="item-boom" style="padding-top: 0;" v-if="type === 3">
					<view class="sold">
						分销佣金 <text>{{info.commission ? Number(info.commission) : 0}}%</text>
					</view>
				</view>
			</view>

			<view class="good-item" style="padding-bottom: 27rpx;">
				<view class="deliver-item">
					<view class="item-lefts">适应人群</view>
					<view class="item-centre">{{info.trialAudience || ''}}</view>
				</view>
				<view class="deliver-item">
					<view class="item-lefts">服务城市</view>
					<view class="item-centre">{{info.service || '全国'}}</view>
				</view>
				<view class="deliver-item" @click="buy(type)">
					<view class="item-lefts">选择</view>
					<view class="item-centre">{{info.specificationsCount}}种规格可选</view>
					<image :src="ossUrl + '/static/shopping/ret-icon.png'" class="more-img"></image>
				</view>
				<view class="deliver-item" @click="specsShow = true" v-if="type != 1">
					<view class="item-lefts">推荐人</view>
					<view class="item-centre item-centre-avatar">
						<u-avatar-group :urls="info.recommend.recommend_arr" size="18" gap="0.2"></u-avatar-group>
						<text>{{info.recommend.recommend_count}}人</text>
					</view>

				</view>
			</view>
			<view class="createCard" @click="createCard" v-if="!isCreateCard">
				领取名片立即购买
			</view>
			<template #bottom>
				<view class="boom-nav boom-nav-other">
					<view class="nav-cart">
						<view class="nav-service">
							<view class="service-item" @click="concatButton">
								<image :src="ossUrl + '/static/shopping/kefu.png'"></image>
								<view class="textss">客服</view>
							</view>

							<view class="service-item" @click="collection">
								<!-- yes-like -->
								<image
									:src="info.stores_collection === 1 ? ossUrl + '/static/image/sc1.png' : ossUrl + '/static/image/sc.png'"
									mode=""></image>
								<view class="textss">收藏</view>
							</view>
							<view class="service-item">
								<button open-type="share"></button>
								<image :src="ossUrl + '/static/分享.png'" mode=""></image>
								<view class="textss">分享</view>
							</view>
						</view>

						<view class="nav-ret" v-if="type == 3">
							<view :class="info.stores_distribution === 1 ? 'cart-btn cart-btn-ac' : 'cart-btn carts'"
								@click="addDistribution">
								{{info.stores_distribution === 1 ? '已带货' : '我要带货'}}
							</view>
							<view class="cart-btn buys" @click="buy(type)">采购下单</view>
						</view>
						<view class="nav-ret" v-else>
							<view class="cart-btn buys" @click="buy(type)" style="width: 250rpx;">立即购买</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 商品详情 -->
			<view class="goods-details">
				<view class="deta-top">
					<view class="lines"></view>
					<view class="deta-tels">商品详情</view>
				</view>

				<view class="deta-data">
					<rich-text :nodes="info.description" :preview="true"></rich-text>
				</view>

			</view>
			<!-- 评论模块 -->
			<view class="comment-mian">
				<view class="comment-top">
					<view class="lines"></view>
					<view class="top-tels">
						宝贝评价
						<!-- <text>500+</text> -->
					</view>
					<!-- <view class="top-ret">
					<text>查看全部</text>
					<image :src="ossUrl + '/static/shopping/ret-icon.png'"></image>
				</view> -->
				</view>
				<view class="header">
					<view class="header-l">
						<view class="header-l-nums">{{info.pf.score || ''}}</view>
						<view class="header-l-tx">{{info.pf.name || ''}}</view>
					</view>
					<view class="header-c">
						<view class="header-c-item">
							<view class="header-c-item-tx">产品质量</view>
							<view class="header-c-item-v">
								<view :style="{width: info.pf.video_quality_score * 10 + '%'}"></view>
							</view>
						</view>
						<view class="header-c-item">
							<view class="header-c-item-tx">物流服务</view>
							<view class="header-c-item-v">
								<view :style="{width: info.pf.content_quality_score * 10 + '%'}"></view>
							</view>
						</view>
						<view class="header-c-item">
							<view class="header-c-item-tx">描述相符</view>
							<view class="header-c-item-v">
								<view :style="{width: info.pf.teaching_method_score * 10 + '%'}"></view>
							</view>
						</view>
					</view>
					<view class="header-c-r">
						<text>{{info.pf.evaluate_number || 0}}人点评</text>
					</view>
				</view>

				<view class="comment-list" v-if="list.length">
					<view class="comment-list-item" v-for="it in list">
						<view class="comment-list-item-avatar">
							<image :src="it.head" mode="" style="border-radius: 50%;"></image>
						</view>
						<view class="comment-list-item-rig">
							<view class="comment-list-item-rig-header">
								<view class="comment-list-item-rig-header-l">
									<view class="comment-list-item-rig-header-l-name">{{it.nickname}}</view>
									<image :src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`" mode="">
									</image>
									<!-- <view class="comment-list-item-rig-header-l-nums">{{'球龄：'+ it.age || ''}}</view> -->
									<view class="comment-list-item-rig-header-l-address">{{it.address || ''}}</view>
								</view>

							</view>
							<view class="comment-list-item-rig-star">
								<!-- <view class="comment-list-item-rig-star-tx">参与视频：{{it.course || ''}}</view> -->
								<view class="comment-list-item-rig-star-item">
									<u-rate :value="it.score / 2" :allowHalf="true" readonly activeColor="#F2CB51"
										inactiveColor="#B3B3B3"></u-rate>
								</view>
							</view>
							<view class="comment-list-item-rig-content">
								{{it.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box-contentbg" v-if="mylist.length">
				<view class="deta-top">
					<view class="lines"></view>
					<view class="deta-tels">猜你喜欢</view>
				</view>
				<view class="box-content">
						<view class="content" @click="handleClick(item)" v-for="(item,index) in mylist" :key="item.id">
							<image class="image" mode="widthFix" :src="item.banner + `?imageView2/1/w/${172 * 1.5}`">
							</image>
							<view class="card-city" v-if="item.PositioningCity">{{item.PositioningCity}}
							</view>
							<view class="card-header">
								<view class="card-header-l" v-if="type ==3">￥{{item.PurchasePrice || ''}}
								</view>
								<view class="card-header-l" v-else>￥{{item.price || ''}}</view>
								<view class="card-header-r">
									已售
									<text
										style="margin-left: 10rpx;font-weight: bold;">{{item.Sales? item.Sales > 10000 ? Math.floor(item.Sales/10000) + '万+' : item.Sales : 0}}</text>
								</view>
							</view>
							<!-- 其他名片 -->
							<block v-if="type == 1">
								<view class="title" style="margin-bottom: 0;">{{item.name}}</view>
							</block>
							<!-- 不是联创看的 -->
							<block v-if="type == 2">
								<view class="title">{{item.name}}</view>
								<view class="card-share">
									<view class="card-share-tx">目前有{{item.recommend.recommend_count}}人推荐本商品
									</view>
									<view class="card-share-c">
										<u-avatar-group :urls="item.recommend.recommend_arr" size="18"
											gap="0.2"></u-avatar-group>
									</view>
								</view>
							</block>
							<!-- 联创看的 -->
							<block v-if="type == 3">
								<view class="card-yg">
									<view class="card-yg-l">
										预估赚
										<text>￥{{item.make_money || ''}}</text>
									</view>
									<view class="card-yg-r">
										零售价
										<text>￥{{item.price}}</text>
									</view>
								</view>
								<view class="title">{{item.name}}</view>
								<view class="card-fx">
									分销佣金：<text>{{item.commission ? Number(item.commission) : 0}}%</text>
								</view>
								<view class="card-footer">
									<view class="card-footer-item" @click.stop="collection2(item,index)">
										<image
											:src="item.stores_collection === 1 ? ossUrl + '/static/image/sc1.png' : ossUrl + '/static/image/sc.png'"
											mode=""></image>
										收藏
									</view>
									<view class="card-footer-btn-ac" @click.stop="addDistribution2(item,index)"
										v-if="item.stores_distribution === 1">已带货</view>
									<view class="card-footer-btn" @click.stop="addDistribution2(item,index)" v-else>
										带货
									</view>
								</view>
							</block>



						</view>
				</view>
			</view>





		</z-paging>
		<payPopupVue ref="payPopupVueRef" />




	</view>
</template>

<script>
	import {
		distributionProductDetails,
		InformationBusinessCard,
		goodsCollection,
		goodsDistribution,
		course_evaluation,
		SelectProduct,
		InformationMyIncome,
		InformationBusinessCardList
	} from '@/common/http/api.js'
	import VideoVue from '@/components/video/video.vue'
	import payPopupVue from './components/payPopup/payPopup.vue'
	import {
		LoginHandle,
		isHasCardList
	} from '@/common/login.js'
	import Waterfall from "./components/waterfall/waterfall-list";
	import WaterfallCol from "./components/waterfall/waterfall-col";
	import WaterfallItem from "./components/waterfall/waterfall-item";
	export default {
		components: {
			"waterfall": Waterfall,
			"waterfall-col": WaterfallCol,
			"waterfall-item": WaterfallItem,
			payPopupVue,
			VideoVue
		},

		data() {
			return {
				mylist: [],
				params: {
					categoriesId: '', //一级分类
					subCategoriesId: '', //二级分类
					name: '', //昵称
					state: 1, //1是联创 2普通人
					business_card_id: '',
					PositioningCity: '',
					circle_id: ''
				},
				urls: [],
				specsShow: false,
				value: 1,
				userPopupShow: false,
				id: '',
				type: 1,
				info: '',
				isCreateCard: false,
				token: '',
				business_card_id: '',
				pjParams: {
					page: 1,
					course_id: ''
				},
				list: [],
				shareId: '',
				card: '',
				nickname: '',
				swiperIndex: 1,
				videoWidth: 0,
				MyIncome: '',
			}
		},
		onLoad(e) {

			this.id = e.id
			this.pjParams.course_id = e.id
			this.type = e.type
			if(e.params){
				this.params=JSON.parse(e.params)
			}
			this.business_card_id = e.business_card_id
			if (e.circle_id) {
				this.params.circle_id = e.circle_id
			}
			if (e.shareId) {
				this.shareId = e.shareId
			}
			//------------
			//this.chooseAddress()
			if (e.nickname) {
				this.nickname = e.nickname
			}
			if (this.nickname) {
				uni.setNavigationBarTitle({
					title: `(${this.nickname})的推荐`
				}); //设置标题
			}
			this.init()


			if (this.type == 2) {
				InformationMyIncome({
					circle_id: this.params.circle_id
				}).then(res => {
					this.MyIncome = res.data
					if (this.MyIncome.founder == 1 || res.data.shopping_mall === 1) {
						//联创
						this.type = 3
						this.params.state = 1
					} else {
						this.params.state = 2
					}
					this.params.business_card_id = ''
					this.getList();
				})
			} else {
				this.params.business_card_id = e.business_card_id
				this.getList();
			}


		},
		onShow() {
			isHasCardList({}).then(res => {
				this.isCreateCard = res
				let token = uni.getStorageSync('token')
				this.token = token
			}).catch(err => {
				this.isCreateCard = false
			})
		},
		onShareAppMessage() {
			console.log('分享mixin', this.$store.state)
			let img = ''
			let title = ''
			let path = '/pages/loading/loading'
			title = this.info.name
			if (Array.isArray(this.info.carousel) && this.info.carousel.length > 0) {
				img = this.info.carousel[0]
			}
			path += '?type=5&id=' + this.id + '&optherType=' + (this.type == 3 ? 1 : this.type) + '&business_card_id=' +
				this
				.business_card_id + '&nickname=' + this.nickname
			if (this.isValid(this.$store.state.share.share_title)) {
				path += '&shareId=' + this.$store.state.share.business_card_id
			}

			return {
				title,
				path,
				imageUrl: img
			};
		},
		//收藏
		onAddToFavorites(res) {
			console.log('收藏mixin', this.$store.state)
			let img = ''
			let title = ''
			let path = ''

			title = this.info.name
			if (Array.isArray(this.info.carousel) && this.info.carousel.length > 0) {
				img = this.info.carousel[0]
			}
			path = 'is_mixin_collect=5&id=' + this.id + '&type=' + (this.type == 3 ? 1 : this.type) +
				'&business_card_id=' + this
				.business_card_id + '&nickname=' + this.nickname
			if (this.isValid(this.$store.state.share.share_title)) {
				path += '&shareId=' + this.$store.state.share.business_card_id
			}

			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		onShareTimeline() {
			console.log('分享mixin', this.$store.state, this.type === 3)
			let img = ''
			let title = ''
			let path = ''
			title = this.info.name
			if (Array.isArray(this.info.carousel) && this.info.carousel.length > 0) {
				img = this.info.carousel[0]
			}
			path += 'is_mixin_collect=5&id=' + this.id + '&type=' + (this.type == 3 ? 1 : this.type) +
				'&business_card_id=' + this
				.business_card_id + '&nickname=' + this.nickname
			if (this.isValid(this.$store.state.share.share_title)) {
				path += '&shareId=' + this.$store.state.share.business_card_id
			}

			return {
				title,
				query: path,
				imageUrl: img
			};

		},
		getDivWidth() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.banner').boundingClientRect(res => {
					if (res) {
						console.log('div 的宽度为：', res.width);
						this.videoWidth = res.width
					}
				}).exec();
			})
		},
		methods: {
			swiperChange(e) {
				console.log('swiperChange', e)
				this.swiperIndex = e.detail.current + 1
			},
			getPrice(price) {
				let p = price
				try {
					if (price >= 10000) {
						p = price / 10000
						p = p.toFixed(1) + 'w'
					}
				} catch (e) {

				}

				return p
			},
			concatButton() {

				if (!this.token) {
					this.toLogin()
					return
				}
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.info.customer_service
					},
					corpId: 'ww877049f5e74db574',
					success(res) {},
					fail(err) {
						console.log('err', err)
						uni.showToast({
							duration: 3000,
							title: err.errMsg,
							icon: 'none'
						})
					},
				})
			},
			toLogin() {
				let url = '/pages/login/login?isApi=2'
				if (this.shareId) {
					url += '&shareId=' + this.shareId
				}
				uni.navigateTo({
					url
				})
			},
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				if (!this.token) return
				this.pjInit(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
			},
			pjInit(pageNo, pageSize) {
				const params = {
					...this.pjParams,
					page: pageNo
				}
				course_evaluation(params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			addDistribution() {
				if (!this.token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				goodsDistribution({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						duration: 3000,
						title: this.info.stores_distribution === 1 ? '已取消带货！' : '添加成功！',
						icon: 'none'
					})
					this.$store.commit('setIsRefresh', true)
					this.info.stores_distribution = this.info.stores_distribution === 1 ? 0 : 1
				})
			},
			collection() {
				if (!this.token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				goodsCollection({
					id: this.id,
					cancel: 1
				}).then(res => {
					uni.hideLoading()
					if (this.info.stores_collection === 1) {
						this.info.stores_collection = 2
					} else {
						this.info.stores_collection = 1
					}
				})
			},
			createCard() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/addMyCard'
					})
				} else {
					let params = `?isApi=2`
					if (this.userId) {
						params += `&userId=${this.userId}`
					}
					if (this.shareId) {
						params += `&shareId=${this.shareId}`
					}
					uni.navigateTo({
						url: '/pages/login/login' + params
					})
				}
			},
			init() {
				uni.showLoading()
				distributionProductDetails({
					id: this.id
				}).then(res => {
					uni.hideLoading()

					try {
						res.data.description = res.data.description.replaceAll('<img src',
							`<img style="width:100%;" src`)
					} catch (e) {

					}

					console.log('详情', res.data)
					this.info = res.data
					// if(this.type === 2) {
					// 	this.business_card_id = res.data.reference.find(i=> i.selected === '1').business_card_id
					// }
				})
			},
			getReTab(type) {
				if (this.tabType != type) {
					this.tabType = type
				}
			},
			addRandomData() {
				setTimeout(() => {
					this.flowList = this.list
				}, 200);
			},

			buyNow() {
				uni.navigateTo({
					url: '/pages/order/confirmOrder'
				})
				this.specsShow = false
			},
			//-------------------------
			buy(type) {
				if (!this.token) {
					this.toLogin()
					return
				}
				this.$refs.payPopupVueRef.show(this.info, type, this.business_card_id)
			},
			close() {
				this.specsShow = false
			},
			closeUserPopup() {
				this.userPopupShow = false
			},
			chooseAddress() {
				wx.chooseAddress({
					success: (res) => {
						console.log('收货地址', res);
						// 处理选择成功后的逻辑，如保存地址信息等
					},
					fail: (error) => {
						console.log(error);
						// 处理选择失败后的逻辑
					}
				});
			},


			// 瀑布流组件点击事件
			handleClick(e) {
				let pages=getCurrentPages()
				if(pages.length>=5){
					uni.redirectTo({
						url: '/pagesA/shopping/detail?id=' + e.id + '&type=' + this.type + '&business_card_id=' + this
							.card.business_card + '&nickname=' + this.nickname +'&circle_id='+this.params.circle_id
							+'&params='+JSON.stringify(this.params)
					})
				}else{
					uni.navigateTo({
						url: '/pagesA/shopping/detail?id=' + e.id + '&type=' + this.type + '&business_card_id=' + this
							.card.business_card + '&nickname=' + this.nickname +'&circle_id='+this.params.circle_id
							+'&params='+JSON.stringify(this.params)
					})
				}

			},
			collection2(item, index) {
				goodsCollection({
					id: item.id,
					cancel: 1,
					circle_id: this.params.circle_id
				}).then(res => {
					this.getList()
				})
			},
			addDistribution2(item, index) {

				uni.showLoading()
				goodsDistribution({
					id: item.id,
					business_card_id: this.card.business_card
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						duration: 3000,
						title: item.stores_distribution === 1 ? '已取消带货！' : '添加成功！',
						icon: 'none'
					})
					this.getList()
				})
			},
			// 获取数据
			getList() {
				SelectProduct({
					page: 1,
					...this.params
				}).then(res => {
					res.data.forEach(i => {
						i.recommend.recommend_arr.forEach(i => {
							i += '?imageView2/1/w/40/h/40'
						})
					})
					let arr=[]
					res.data.forEach(item => {
						if(item.id!=this.id){
							arr.push(item)
						}
					})
					
					this.mylist = arr
				})
			},
		}
	}
</script>

<style lang="scss">
	.box-contentbg {
		
		width: 720rpx;
		overflow: hidden;
		margin-top: 30rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		
	}

	.box-content {
		display: flex;
		flex-wrap: wrap;
		// padding-bottom: 30rpx;
	}

	.title {
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
		margin: 20rpx 0;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 72rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.content {
		width: 345rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 4px;
		line-height: 1.3;
		border-radius: 20rpx;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
    .content:nth-of-type(odd){
		margin-left: 0;
	}
	page {
		background-color: #F1F1F1;
		padding-bottom: 140rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.header {
		width: 100%;
		box-sizing: border-box;
		padding: 0 52rpx 43rpx;
		display: flex;
		align-items: center;
		// border-bottom: 20rpx solid #F6F7F8;

		.header-l {
			margin-right: 43rpx;
			display: flex;
			width: 100rpx;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.header-l-nums {
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 48rpx;
				color: #FF930A;
				margin-bottom: 21rpx;
			}

			.header-l-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF9101;
			}
		}

		.header-c {
			flex: 1;
			min-width: 0;

			.header-c-item {
				display: flex;
				align-items: center;
				margin-bottom: 27rpx;

				.header-c-item-tx {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #131313;
					width: 110rpx;
					margin-right: 22rpx;
				}

				.header-c-item-v {
					flex: 1;
					min-width: 0;

					view {
						height: 12rpx;
						background: #F2CB51;
						border-radius: 6rpx;
					}
				}
			}

			.header-c-item:last-child {
				margin-bottom: 0;
			}
		}

		.header-c-r {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-left: 20rpx;
			height: 153rpx;
			min-width: 110rpx;
		}
	}

	.spec-goods {
		display: flex;
		padding: 36rpx;
		position: relative;
		border-bottom: 10rpx solid #f5f5f5;

		.goods-img {
			width: 200rpx;
			height: 200rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 14rpx;
			}
		}

		.spec-goods-info {
			margin-left: 17rpx;

			.spec-goods-price {
				color: #FC482F;
				font-size: 46rpx;
				//margin-top: 110rpx;

				text {
					font-size: 28rpx;
				}
			}

			.spec-goods-no {
				color: #999999;
				font-size: 22rpx;
			}
		}

		.spec-goods-r {
			margin-left: 30rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.spec-goods-r-price {
				font-size: 40rpx;
				font-weight: bold;
				color: #F75B20;
				flex: 1;
				display: flex;
				align-items: center;

				text {
					font-weight: bold;
					font-size: 65rpx;
				}
			}

			.spec-goods-r-num {
				display: flex;
				align-items: center;

				.spec-goods-r-num-item {
					transform: scale(0.8) translateX(-20rpx);
				}

				&>text {
					color: #999999;
					font-size: 22rpx;
				}
			}
		}
	}

	.spec-address {
		box-sizing: border-box;
		padding: 20rpx 36rpx;
		display: flex;
		align-items: center;
		border-bottom: 10rpx solid #f5f5f5;

		.spec-address-img {
			width: 13rpx * 2;
			height: 16rpx * 2;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.spec-address-c {
			flex: 1;
			min-width: 0;
			padding: 0 30rpx;

			.spec-address-c-content {
				margin-bottom: 10rpx;

				text {
					margin-right: 10rpx;
				}
			}

			.spec-address-c-subTitle {
				font-size: 26rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.spec-address-r {
			width: 40rpx;

			image {}
		}
	}

	.spec-title {
		padding: 4rpx 36rpx 7rpx 36rpx;
		color: #000000;
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.spec-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		overflow-y: scroll;
		height: 500rpx;

		.spec-list-item {
			width: 100%;
			display: flex;
			align-items: center;
			background: #F7F7F7;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			border: 1rpx solid #F7F7F7;

			.spec-address-img {
				width: 50rpx;
				height: 50rpx;
			}

			.spec-list-c {
				min-width: 0;
				flex: 1;
				padding: 0 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
			}

			.spec-list-r {
				display: flex;
				align-items: center;

				.spec-list-r-price {
					font-size: 28rpx;
					color: #A3A3A3;
					margin-right: 30rpx;
				}
			}
		}

		.spec-list-item-ac {
			background: #FFF5F3;
			border: 1rpx solid #E6B59A;

			.spec-list-c {
				color: #E18D6D;
			}

			.spec-list-r-price {
				color: #E18D6D !important;
			}
		}
	}


	.num-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 36rpx;
		border-bottom: 2rpx solid #E1E1E1;

		.num-text {
			color: #000000;
			font-size: 26rpx;
			font-weight: bold;
		}

		.num-operation {
			display: flex;
			align-items: center;

			.num-val {
				width: 91rpx;
				height: 50rpx;
				background-color: #F3F3F3;
				text-align: center;
				line-height: 50rpx;
				color: #000000;
				font-size: 30rpx;
				font-weight: bold;
				margin: 0rpx 18rpx;
			}
		}
	}

	.banner {
		height: 700rpx;
		position: relative;
	}

	.swipers {
		height: 700rpx;
	}

	.banner-current {
		width: 80rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: rgba(0, 0, 0, 0.4);
		position: absolute;
		right: 38rpx;
		bottom: 32rpx;
		display: flex;
		line-height: 48rpx;
		justify-content: center;
		color: #FFFFFF;
		font-size: 26rpx;
	}

	.good-item {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 18rpx 18rpx 0rpx 18rpx;
		padding: 0rpx 24rpx;

		.good-price {
			padding: 32rpx 0rpx 20rpx 0rpx;
			display: flex;
			align-items: center;

			.present {
				color: #EF4E4E;
				font-size: 32rpx;
				font-weight: bold;

				text {
					font-size: 48rpx;
				}
			}

			.original {
				text-decoration: line-through;
				color: #999999;
				font-size: 28rpx;
				margin-left: 22rpx;
				margin-top: 10rpx;
			}
		}

		.good-fx {
			width: 100%;
			padding: 32rpx 0rpx 20rpx 0rpx;
			display: flex;

			.good-fx-item {
				flex: 1;

				.good-fx-item-tx {
					font-size: 26rpx;
					color: #222;
					margin-bottom: 10rpx;
				}

				.good-fx-item-price {
					font-size: 40rpx;
					color: #EF4E4E;
					font-weight: 400;

					text {
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}

			.good-fx-item:first-child {
				// margin-right: 20rpx;
			}
		}

		.good-tx {
			color: #999999;
			font-size: 24rpx;
			padding: 0 0 20rpx;
		}

		.good-title {
			color: #222222;
			font-size: 34rpx;
			font-weight: bold;
		}

		.item-boom {
			padding: 28rpx 0rpx;
			display: flex;
			align-items: center;
			color: #999999;
			font-size: 24rpx;

			text {
				color: #EF4E4E;
				font-weight: bold;
				margin-left: 30rpx;
			}
		}
	}

	.deliver-item {
		display: flex;
		padding-top: 27rpx;
		align-items: center;

		.item-lefts {
			color: #999999;
			font-size: 28rpx;
		}

		.item-centre {
			margin-left: 36rpx;

			.item-region {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 28rpx;

				.region {
					padding-right: 22rpx;
				}

				.express {
					padding-left: 22rpx;
					border-left: 2rpx solid #EDEDED;
				}
			}
		}

		.item-centre-avatar {
			display: flex;
			align-items: center;

			&>text {
				margin-left: 20rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}

		.more-img {
			margin-left: auto;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.card-footer {
		width: 100%;
		border-top: 1rpx solid #e6e6e6;
		padding: 20rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.card-footer-item {
			width: 50rpx;
			font-size: 22rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #4D4D4D;
			position: relative;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 99;
				opacity: 0;
			}
		}

		.card-footer-item1 {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #4D4D4D;
			font-size: 22rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}
		}

		.card-footer-btn {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
			background: #ED6B2D;
			border-radius: 10rpx;
			padding: 15rpx 15px;
			margin-left: 5rpx;
		}

		.card-footer-btn-ac {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #ED6B2D;
			border: 1rpx solid #ED6B2D;
			border-radius: 10rpx;
			padding: 15rpx 15px;
			margin-left: 5rpx;
		}
	}

	.card-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx 0;
		box-sizing: border-box;

		.card-header-l {
			font-size: 28rpx;
			color: #F66061;
			font-weight: bold;
		}

		.card-header-r {
			font-size: 24rpx;
			color: #838383;
			font-weight: bold;

			text {
				color: #F65F61;
				font-weight: 300;
			}
		}
	}

	.card-share {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		// margin-bottom: 20rpx;

		.card-share-tx {
			width: 100%;
			color: #9F9F9F;
			margin-bottom: 10rpx;
			font-weight: 300;
			font-size: 26rpx;
		}
	}

	.card-yg {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding-top: 20rpx;

		.card-yg-l {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8rpx 0;
			font-size: 18rpx;
			color: #898386;
			background: #FCEBF2;

			text {
				color: #F38C8D;
				font-size: 18rpx;
			}

			border-radius: 10rpx;
			border-bottom-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
		}

		.card-yg-r {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8rpx 0;
			font-size: 18rpx;
			color: #898386;
			background: #EDECFD;

			text {
				color: #7EA1FA;
				font-size: 18rpx;
			}

			border-radius: 10rpx;
			border-bottom-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
		}
	}

	.card-fx {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #979797;

		text {
			color: #F35E67;
		}
	}

	.boom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;

		z-index: 9999;

		.nav-cart {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 110rpx;
		}

		.nav-service {
			display: flex;
			align-items: center;

			.service-item {
				padding: 0rpx 24rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				button {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					opacity: 0;
				}

				image {
					width: 46rpx;
					height: 46rpx;
				}

				.textss {
					color: #333333;
					font-size: 18rpx;
				}

			}
		}

		.nav-ret {
			display: flex;
			align-items: center;
			padding-right: 16rpx;

			.cart-btn {
				width: 206rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				border-radius: 38rpx;
				color: #FFFFFF;
				font-size: 26rpx;
			}

			.cart-btn-ac {
				border: 1rpx solid #FF940F;
				color: #FF940F;
				margin-right: 20rpx;
			}

			.carts {
				background: linear-gradient(271deg, #FF940F 0%, #FEC90B 100%);
				margin-right: 14rpx;
			}

			.buys {
				background: linear-gradient(271deg, #F6241F 0%, #FC684D 100%);
			}
		}

	}

	.boom-nav-other {
		.nav-service {
			width: 400rpx;
			display: flex;
			justify-content: space-around;
		}

		.nav-ret {
			flex: 1;
			display: flex;
			justify-content: center;
		}
	}

	.classify-item {
		display: flex;
		margin-left: 92rpx;
		align-items: center;
		margin-top: 10rpx;

		.img-list {
			width: 60rpx;
			height: 60rpx;
			border-radius: 8rpx;
			margin-right: 12rpx;
		}

		.optional {
			height: 60rpx;
			line-height: 60rpx;
			color: #989898;
			font-size: 26rpx;
			padding: 0rpx 23rpx;
			background-color: #F2F2F2;
			border-radius: 8rpx;
		}
	}

	.lines {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(180deg, #F6241F 0%, #FC684D 100%);
	}

	.comment-mian {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 18rpx 18rpx 0rpx 18rpx;

		.comment-top {
			padding: 36rpx 16rpx 36rpx 34rpx;
			display: flex;
			align-items: center;

			.top-tels {
				margin-left: 22rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;

				text {
					font-size: 22rpx;
					margin-left: 8rpx;
				}
			}

			.top-ret {
				margin-left: auto;
				display: flex;
				align-items: center;

				text {
					color: #999999;
					font-size: 22rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.comment-tab {
			display: flex;
			align-items: center;
			padding: 0rpx 16rpx;

			.tabss {
				width: 170rpx;
				height: 54rpx;
				text-align: center;
				line-height: 54rpx;
				background-color: #F3F3F3;
				border-radius: 30rpx;
				color: #000000;
				font-size: 26rpx;
				margin-left: 18rpx;
			}
		}

		.comment-items {
			margin: 0rpx 16rpx;
			padding: 32rpx 15rpx;
			background-color: #FFFFFF;

			.item-user-info {
				display: flex;

				.tou-img {
					width: 58rpx;
					height: 58rpx;
					border-radius: 50%;
				}

				.user-info {
					margin-left: 12rpx;
					position: relative;
					width: 80%;

					.user-name {
						color: #000000;
						font-size: 26rpx;
					}

					.user-score {
						position: absolute;
						bottom: -4rpx;

						image {
							width: 16rpx;
							height: 16rpx;
							margin-right: 8rpx;
						}
					}
				}
			}

			.comment-texts {
				padding-top: 16rpx;
				color: #000000;
				font-size: 26rpx;
			}

			.comment-img-list {
				margin-top: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 14rpx;
				}
			}

			.norms {
				margin-top: 22rpx;
				color: #999999;
				font-size: 22rpx;
			}
		}
	}

	.comment-items:not(:last-child) {
		border-bottom: 2rpx solid #DADADA;
	}

	.shop-main {
		margin: 18rpx 18rpx 0rpx 18rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.shop-info {
			padding: 40rpx 26rpx 22rpx 26rpx;
			display: flex;

			.shop-logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
			}

			.info-item {
				margin-left: 24rpx;
				width: 80%;

				.shop-title {
					color: #333333;
					font-size: 26rpx;
					font-weight: 600;
				}

				.info-two {
					display: flex;
					align-items: center;
					margin-top: 17rpx;

					.grade {
						display: flex;
						align-items: center;
						height: 36rpx;
						padding: 0rpx 10rpx;
						background-color: #F6F6F6;
						border-radius: 6rpx;
						color: #333333;
						font-size: 20rpx;
					}

					.follows {
						color: #8C8C8C;
						font-size: 22rpx;
						margin-left: 26rpx;
					}
				}

				.info-three {
					display: flex;
					align-items: center;
					margin-top: 18rpx;

					.info-three-item {
						margin-right: 14rpx;
						color: #333333;
						font-size: 20rpx;

						.texts {
							margin-left: 4rpx;
							font-size: 20rpx;
						}

						.pj {
							font-weight: bold;
						}

						.ls {
							color: #5CBC3E;
						}

						.cs {
							color: #FF970F;
						}

						.hs {
							color: #FC482F;
						}
					}
				}
			}
		}

		.shop-describe {
			padding: 0rpx 26rpx;
			color: #333333;
			font-size: 22rpx;
		}

		.shop-img-list {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx;

			.shop-img-item {
				padding: 0rpx 6rpx;

				image {
					width: 156rpx;
					height: 156rpx;
				}

				.shop-img-tel {
					text-align: center;
					color: #333333;
					font-size: 24rpx;
					margin-top: 14rpx;
				}
			}
		}


	}

	.shop-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0rpx;

		.recommend {
			width: 206rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FC482F;
			font-size: 24rpx;
			border-radius: 30rpx;
			border: 2rpx solid #FC482F;
			margin-right: 19rpx;
		}

		.around {
			width: 206rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(270deg, #F6241F 0%, #FC684D 100%);
			border-radius: 30rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			margin-left: 19rpx;
		}
	}

	.recommend-main {
		margin: 18rpx 18rpx 0rpx 18rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.recommend-tab {
			display: flex;
			padding-top: 40rpx;
			padding-bottom: 30rpx;

			.recommend-tabss {
				width: 50%;
				text-align: center;
				color: #333333;
				font-size: 26rpx;
				position: relative;

				.bottoms {
					position: absolute;
					bottom: -18rpx;
					right: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 52rpx;
					height: 6rpx;
					background: linear-gradient(270deg, #F6241F 0%, #FC684D 100%);
				}
			}
		}

		.recommend-list {
			padding: 0rpx 18rpx;
			margin-top: 10rpx;

			.recommend-item {
				padding: 0rpx 8rpx 28rpx 8rpx;
				float: left;

				.recommend-img {
					width: 210rpx;
					height: 220rpx;
					border-radius: 10rpx;
				}

				.recommend-item-tel {
					width: 210rpx;
					color: #333333;
					font-size: 22rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
					overflow: hidden;
					padding: 0rpx 7rpx;
				}

				.recommend-item-price {
					padding: 0rpx 7rpx;
					color: #333333;
					font-size: 26rpx;
					font-weight: bold;
					margin-top: 6rpx;
				}
			}
		}
	}

	.goods-details {
		margin-top: 18rpx;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		width: 714rpx;
		margin: 0 auto;

		border-radius: 20rpx;
		margin-top: 20rpx;



		.deta-data {
			padding: 0rpx 18rpx;
			width: 100%;
			box-sizing: border-box;
		}
	}

	.deta-top {
		display: flex;
		align-items: center;
		padding: 36rpx 34rpx 22rpx 34rpx;

		.deta-tels {
			margin-left: 22rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.guess {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40rpx;
		padding-bottom: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}

		text {
			color: #333333;
			font-size: 24rpx;
			margin-left: 5rpx;
		}
	}

	.btns-lists {
		display: flex;
		// border-top: 2rpx solid #E1E1E1;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		align-items: center;
		padding-left: 11rpx;

		.buutn {

			width: 690rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			border-radius: 10rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			margin: 0 auto;

			text {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.add-cart {
			background: linear-gradient(271deg, #FF940F 0%, #FEC90B 100%);
		}

		.buy {
			background: linear-gradient(271deg, #F6241F 0%, #FC684D 100%);
		}
	}

	.comment-list {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 100rpx;

		.comment-list-item {
			width: 100%;
			display: flex;
			padding-bottom: 40rpx;

			.comment-list-item-avatar {
				width: 86rpx;
				height: 86rpx;
			}

			.comment-list-item-rig {
				flex: 1;
				min-width: 0;
				margin-left: 22rpx;

				.comment-list-item-rig-header {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26rpx;

					.comment-list-item-rig-header-l {
						display: flex;
						align-items: center;

						.comment-list-item-rig-header-l-name {
							font-family: PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #211C1E;
							margin-right: 19rpx;
						}

						image {
							width: 22rpx;
							height: 22rpx;
							margin-right: 33rpx;
						}

						.comment-list-item-rig-header-l-nums {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
							margin-right: 40rpx;

						}

						.comment-list-item-rig-header-l-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}

					.comment-list-item-rig-header-r {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}

						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}

				.comment-list-item-rig-star {
					display: flex;
					align-items: center;

					.comment-list-item-rig-star-tx {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #727272;
						margin-right: 23rpx;
					}

					.comment-list-item-rig-star-item {
						display: flex;
						align-items: center;

						image {
							margin-right: 9rpx;
							width: 22rpx;
							height: 22rpx;
						}
					}
				}

				.comment-list-item-rig-content {
					background: #F6F7F8;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 15rpx 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #211C1E;
					margin-top: 19rpx;
				}
			}
		}

		.comment-list-item:last-child {
			padding-bottom: 0;
		}
	}

	.createCard {
		width: 690rpx;
		position: fixed;
		bottom: 140rpx;
		left: 30rpx;
		z-index: 9999;
		padding: 30rpx 10rpx;
		border-radius: 50rpx;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		box-sizing: border-box;
	}

	.userPopupShow {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999999;

		.userPopupShow-mask {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
		}

		.userPopupShow-c {
			width: 600rpx;
			height: fit-content;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2;
			background: white;
			border-radius: 30rpx;
			box-shadow: 0 0 12rpx #e4e4e4;

			.userPopupShow-close {
				display: flex;
				justify-content: flex-end;
				box-sizing: border-box;
				padding-right: 20rpx;
				padding-top: 20rpx;
			}

			.userPopupShow-c-list {
				width: 100%;
				padding: 20rpx;
				height: 620rpx;
				overflow-y: scroll;
				box-sizing: border-box;

				.userPopupShow-c-list-item {
					width: 100%;
					display: flex;
					align-items: center;
					background: #F7F7F7;
					box-sizing: border-box;
					padding: 10rpx 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.userPopupShow-c-list-item-name {
						font-size: 28rpx;
					}

					.userPopupShow-c-list-item-friend {
						font-size: 30rpx;
						color: #A3A3A3;
					}

					.userPopupShow-c-list-item-num {
						flex: 1;
						min-width: 0;
						text-align: right;
						color: #FFC056;
					}
				}
			}
		}

	}
</style>